<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>轧钢</title>
    <link rel="stylesheet" href="../css/normalize.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/zhagang.css"/>
</head>
<body class="theme">
<div id="furnace" v-cloak>
    <div id="header">
        <!-- 头部导航组件 -->
        <header-nav>
            <drop-menu slot="dropMenu" :menulist="headerMenuList" deftitle="3号轧钢" sendname="num" class="header-boiler outter-top fr" type="zhagang"></drop-menu>
        </header-nav>
    </div>
    <section class="main outter-top clearfix auto" >
        <div class="left-side fl skin outter-right">
            <!-- 产用交互组件 -->
            <production-component></production-component>
            <!-- 主管压力放散组件 -->
            <pressure-component></pressure-component>
            <div class="gas">
                <div class="gas-title outter-top  outter-bottom  clearfix">
                    <h2 class="common-title fl">
                        全网波动归因
                    </h2>
                </div>
                <div class="gas-content skin2 border" id="zhagang_performance">

                </div>
            </div>
        </div>
        <!--入炉部分-->
        <div class="main-contain skin fl posSup">
            <ul class="input-furnace-chart border">
                <li class="input-furnace-chart-child fl" v-for="(item,key,index) in statusObj">
                    <div class="tempreture clearfix outter-align">
                        <p class="fl tempreture-current">当前炉顶温度<br><span class="current-data">{{item.cur_temp | keepInteger}}</span></p>

                    </div>
                    <div class="main-item-data-content outter-align clearfix">
                        <p class="fl main-item-data-current">当前用气量 <br><span class="current-data">{{item.cur_gas |keepTwo}}</span></p>
                        <p class="fl main-item-data-prediction">建议用气量 <br><span class="prediction-data">{{item.gas_prediction|keepTwo}}-{{item.delta|keepTwo}}</span></p>
                        <p class="fl unit"><span>X10<sup>3</sup>m<sup>3</sup>/h</span></p>
                    </div>
                    <div class=" clearfix posSub legend">
                        <div class="pressure-legend-all fl" v-if="index==0">
                            <div class="fl legend-des">
                                <span class="pressure-legend1-all-icon legend-all-icon fl"></span>
                                <span class="fl">实际</span>
                            </div>
                            <div class="fl pressure-legend2-de">
                                <span class="pressure-legend2-all-icon legend-all-icon fl"></span>
                                <span class="fl">预测</span>
                            </div>
                        </div>
                        <p class="fr input-furnace-chartName">{{key | toCn}}</p>
                    </div>
                    <div class="input-furnace-tab border" :id="statusChartId[index]"></div>
                </li>
            </ul>
            <ul class="setTemp clearfix">
                <li class="setTempItem fl">
                    <p class="clearfix tempreture-set">设定炉顶温度<br>
                    <div class="fl">
                        <input class="prediction-data-input fl" v-model="TempVal.erjia" type="text"/>
                        <span class="add fl">&nbsp;±&nbsp;</span>
                        <input class="prediction-data-input fl" v-model="TempVal.erjia_delta" type="text"/>
                    </div>

                    </p>
                </li>
                <li class="setTempItem fl">
                    <p class="fl tempreture-set">设定炉顶温度<br>
                    <div class="fl">
                        <input class="prediction-data-input fl" v-model="TempVal.yijia" type="text"/>
                        <span class="add fl ">&nbsp;±&nbsp;</span>
                        <input class="prediction-data-input fl" v-model="TempVal.yijia_delta" type="text"/>
                    </div>
                    </p>
                </li>
                <li class="setTempItem fl">
                    <p class="fl tempreture-set">设定炉顶温度<br>
                    <div class="fl">
                        <input class="prediction-data-input fl" v-model="TempVal.junre" type="text"/>
                        <span class="fl add">&nbsp;±&nbsp;</span>
                        <input class="prediction-data-input fl" v-model="TempVal.junre_delta" type="text"/>
                    </div>
                    </p>
                    <p class="fl send">
                        <input type="button" id="sel" value="确定" @click="sendTemVal">
                    </p>
                </li>
            </ul>
            <my-message :msg="msglist"></my-message>
        </div>
        <div class="right-side outter-left fl" >
            <div class="input-gas border">
                <h3 class="common-title outter-top outter-left">入炉/出炉温度</h3>
                <div class="input-furnace">
                    <div id="zhagangTempreture" class="zhagangTempreture"></div>
                </div>
                <div class="">
                    <ul class="scroll-box">
                        <li class="clearfix main-furnace" v-for="(item,index) in dataList">
                            <div class="main-furnace-mess">
                                <p class="fl main-data-furnace">
                                    {{item.zhagang_id}}线</p>
                                <p class="normal-color fr" style="line-height: 30px">
                                    <span :class="[{'fontnormal-14':item.status==0},{'fontRed-14':item.status==1}]">{{item.status|toStatus}}</span>
                                    </br>
                                    <span :class="[{'fontnormal-14':item.status==0},{'fontRed-14':item.status==1}]">当前用气量：<span >{{Number(item.gas_use)|formatterVal}}</span>X10<sup>3</sup>m³/h</span>
                                </p>
                            </div>
                            <div v-show="item.flag==true">
                                <div class="main-data-furnace-chart clearfix" id="">
                                    <table-component :msg="item" class="fl" v-for="item in rightlist" :key="item.id"></table-component>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</div>
</body>
<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="../js/lib/echarts.min.js"></script>
<script src="../js/lib/vue.min.js"></script>
<script src="../js/lib/elementUi.js"></script>
<script src="../js/lib/vue-resource.js"></script>
<script src="../js/lib/lodash.js"></script>
<script src="../js/data.js"></script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
<script src="../js/components.js"></script>
<script src="../js/chart.js"></script>
<script src="../js/components.js"></script>
<script type="text/javascript" src="laydate.js"></script>
<script src="../js/zhagang.js"></script>
</html>